<template>
    <section class="yuan_data">
  			<p class="form1">
  			  <el-button type="primary"  icon="el-icon-circle-plus-outline" @click='add'>新增</el-button>
  			   <el-button type="primary"  style="float: right;" @click="search">搜索</el-button>
  			  <el-input v-model="form.search" placeholder="请输入内容" style="width: 130px;float: right;"></el-input>
  			</p>
        
        	<p class="sort">
        		<span style="font-size: 18px;margin-right: 10px;">排序</span>
        		 <el-button type="primary" @click="changeSort('isCreatDataIcon',$event)" icon="el-icon-back" :class="form.sortTime==='asc'?'up':'down'">创建时间</el-button>
        		 <el-button type="primary"  @click="changeSort('isNumIcon',$event)" icon="el-icon-back" :class="form.sortNumber==='asc'?'up':'down'">引用数量</el-button>
        	</p>
        	
        	
			<el-row :gutter="30"  class="data_manage">
				  <el-col :span="6" class="data_item" v-for="(item,index) in dataManage">
				  		<p class="first_p normal">{{item.name}}</p>
	        			<p class="normal">{{item.key}}</p>
	        			<p class="normal">{{dataType[item.dataType]}}</p>
	        			<p class="hover">
	        				<span @click="detail(item.id)">详情</span>
	        			</p>
	        			<p class="hover">
	        				<span  @click="updataDiy(item.id)">修改</span>
	        			</p>
	        			<p class="hover">
	        				<span  @click="del(item.id)">删除</span>
	        			</p>
				  </el-col>
				  <p v-if="dataManage.length===0" style="text-align: center;">暂无数据</p>
			</el-row>
				
			<p style="margin-top: 20px;text-align: right;">
					<el-pagination
					  background
					   @current-change="handleCurrentChange"
					  layout="prev, pager, next"
					  :total="1000">
					</el-pagination>
			</p>
			
			<el-dialog
			  :title="titleDiy"
			  :visible.sync="dialogVisible1"
			  width="50%"
			  class="diy-dialog"
			  :append-to-body=true
			 >
			 <form-diy @insertData = "insertData" 
			 	@closeForm="closeForm" 
			 	:type="dialog1Type" 
			 	:content="currentPage" 
			 	:detail="detailData"></form-diy>
			</el-dialog>
    </section>
</template>

<script>
    import formDiy from '../components/formDiy'
    import {componentGetYuanData,
	    	componentGetYuanDataDeatil,
	    	componentDelYuanData,
	    	componentAddYuanData,
	    	componentUpdataYuanData
    } from '../components/computedFuwuServer'
    export default {
    	components:{
    		formDiy
    	},
        data() {
          return {
          		updataId :0,
          		currentPage:'yuanData',
          		titleDiy:'',
          		dialog1Type:'',
          		dialogVisible1:false,
          		isCreatDataIcon:false,/*创建时间的图标*/
          		isNumIcon:true,/*引用数量的图标*/
          		form:{
          			search:'',
          			sortTime:'asc',
          			sortNumber:'asc',
          			pageNum:1,
          			pageSize:6
          		},
          		detailData:{},
          		dataManage:[],
          		dataType:['null','采集类','共享返回类','共享请求类'],
          };
        },
        methods: {
        	closeForm(){/*关闭弹窗*/
        		this.dialogVisible1 = false;
        	},
        	changeSort(val,ev){/*改变顺序*/
        		if(val==='isCreatDataIcon'){
        			this.form.sortTime = this.form.sortTime==='asc'?'desc':'asc';
        		}else if(val==='isNumIcon'){
        			this.form.sortNumber = this.form.sortNumber==='asc'?'desc':'asc';
        		}
        		this.search();
        	},
        	add(){
        		this.updataId = 0;
        		this.titleDiy = '新增元数据'
        		this.dialog1Type = 'add';
        		this.dialogVisible1 = true;
        	},
        	detail(val){/*打开详情*/
        		console.log(val);
        		componentGetYuanDataDeatil(this,{id:val});	
        		this.titleDiy = '详情页面'
        		this.dialog1Type = 'detail';
        		this.dialogVisible1 = true;
        		
        	},
        	updataDiy(val){/*打开修改*/
        		this.updataId = val;
        		this.titleDiy = '修改元数据';
        		this.dialog1Type = 'add';
        		this.dialogVisible1 = true;
        	},
        	del(val){/*删除元数据*/
        		componentDelYuanData(this,{id:val});
        	},
        	search(){/*搜索*/
        		componentGetYuanData(this,this.form);
        	},
        	insertData(param){/*插入元数据,更新元数据*/
        		this.updataId ===0?	componentAddYuanData(this,param):componentUpdataYuanData(this,{id:this.updataId},param);
        	},
        	handleCurrentChange(val){
        		this.form.pageNum =val;
        		this.search();
        	}
        },
        mounted(){
        	this.search();
        }
  };
</script>

<style>
   	.yuan_data .form1{
    	margin: 10px;
    	border-bottom: dashed 1px #a7a4a4;
    	padding-bottom: 25px;
    }
   .yuan_data  .sort{
    	text-align: right;
    }
   .yuan_data  .up .el-icon-back{
    	transform: rotate(90deg);
    }
   .yuan_data  .down .el-icon-back{
    	transform: rotate(-90deg);
    }
   .yuan_data   .data_manage{
  
   }
    .yuan_data  .data_item{
        height: 150px;
	    background: orange;
	    /* max-width: 231px; */
	    width: 10%;
	    margin: 0 5%;
	    min-width: 120px;
    	max-width: 140px;
	    padding-left: unset !important;
	    padding-right: unset !important;
	    border: solid 1px #c1c1c1;
	        box-sizing: content-box;
	         	margin-top: 20px;
    }
     .yuan_data  .data_item p{
     	    height: 50px;
	    background: #ebecf2;
	    text-align: center;
	    line-height: 50px;
	    font-size: 15px;
	    color: #000000;
     }
     .yuan_data  .data_item p.first_p{
     	background: #85beeb;
     	color: #fff;
     }
     .hover {
     	display: none;
     }
     
     .hover span{
     	display: inline-block;
     	background: #469ff8;
     	width: 90px;
     	height: 30px;
     	line-height: 30px;
     	text-align: center;
     	color: #FFF;
     	font-size: 14px;
     	cursor: pointer;
     	border-radius: 50px;
     }
     .data_item:hover .hover{
     	display: block;
     }
     .data_item:hover .normal{
     	display: none;
     }
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>